<template>
	<u-navbar title="成品入库" bgColor="#FBFBFF" :autoBack="true" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
		<template #right>
			<!-- <view class="navbar-submit" @click="submit">
				<text>提交</text>
			</view> -->
		</template>
	</u-navbar>
	<view class="baseForm">
		<u--form labelPosition="left" :model="umodel" :rules="rules" ref="uForm" labelWidth="160rpx" errorType="toast">
			<u-form-item label="指定入库位置">
			  
			</u-form-item>
			<u-form-item label="托盘条码">
				<!-- 条码录入 -->
				<scan-bar ref="scanBarRef" @code-scanned="getScanResult" class="scan-bar"></scan-bar>
			</u-form-item>
	        <u-form-item label="仓库" prop="warehouse" @click="openTypeSelect">
		        <u--input v-model="umodel.warehouse" disabled disabledColor="#ffffff" inputAlign="right" placeholder="请选择"></u--input>
		       <template #right>
			     <u-icon name="arrow-right"></u-icon>
		       </template>
	        </u-form-item>
			
			<u-form-item label="存储类型" prop="storagetype" borderBottom @click="openStorageSelect">
			    <u--input v-model="umodel.storagetype" disabled disabledColor="#ffffff" inputAlign="right" placeholder="请选择"></u--input>
			   <template #right>
			     <u-icon name="arrow-right"></u-icon>
			   </template>
			</u-form-item>
			<u-form-item label="存储区" prop="storage" borderBottom @click="openstorageSelect">
			    <u--input v-model="umodel.storage" disabled disabledColor="#ffffff" inputAlign="right" placeholder="请选择"></u--input>
			   <template #right>
			     <u-icon name="arrow-right"></u-icon>
			   </template>
			</u-form-item>
			<u-form-item label="仓位" prop="bin" borderBottom @click="openbinSelect">
			    <u--input v-model="umodel.bin" disabled disabledColor="#ffffff" inputAlign="right" placeholder="请选择"></u--input>
			   <template #right>
			     <u-icon name="arrow-right"></u-icon>
			   </template>
			</u-form-item>
			<u-form-item label="托盘信息">
			  
			</u-form-item>
			<u-form-item label="物料号" prop="name">
				<u--input v-model="umodel.name" placeholder="物料号" clearable></u--input>
			</u-form-item>
			<u-form-item label="数量" prop="number">
				<u--input v-model="umodel.number" placeholder="数量" clearable></u--input>
			</u-form-item>
			<u-form-item label="生产批次" prop="batch">
				<u--input v-model="umodel.batch" placeholder="生产批次" clearable></u--input>
			</u-form-item>
			
	
		</u--form>
		<!-- 搜索信息 -->
		<view class="search">
			<u-button text="重置" class="custom-style" @click="reset"></u-button>
			
		</view>
		<view class="search">
			<u-button type="primary" text="提交" class="submit_btn" @click="submit"></u-button>
		</view>
	
		<u-line></u-line>
		<!-- 卡片显示 -->
		<view v-if="scanList.length" class="list">
			
			
		</view>
		<view v-else>
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
		</view>
	</view>
	<u-picker :show="show" :columns="columns" title="请选择" keyName="warehouseName" immediateChange cancel-text="取 消"  @cancel="show = false" @confirm="typeSelect"  ></u-picker>
	<u-picker :show="show1" :columns="columns1" title="请选择" keyName="storageTypeName" immediateChange cancel-text="取 消"  @cancel="show1 = false" @confirm="typeSelect1"  ></u-picker>	
	<u-picker :show="show2" :columns="columns2" title="请选择" keyName="storageSectionCode" immediateChange cancel-text="取 消"  @cancel="show2 = false" @confirm="typeSelect2"  ></u-picker>
	<u-picker :show="show3" :columns="columns3" title="请选择" keyName="binCode" immediateChange cancel-text="取 消"  @cancel="show3 = false" @confirm="typeSelect3"  ></u-picker>		
	<u-back-top :scroll-top="scrollTop" top="200" mode="squery"></u-back-top>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { onPageScroll } from '@dcloudio/uni-app';
import ScanBar from '@/components/scan-bar/index.vue';
import { http } from '@/utils/http';
import { CommonValue, PageResult } from '@/types/type';
// 获取安全距离高度
const { safeAreaInsets } = uni.getSystemInfoSync();

// 监听页面到顶部距离
const scrollTop = ref(0)
onPageScroll((e)=>{
	scrollTop.value = e.scrollTop
})

// 表单数据定义
const umodel = reactive({
  code: '',
  name: '',
  warehouse: '',
  warehouseId: '',
  storageTypeId: '',
  storageSectionId: '',
  batch: '',
  number: '',
  storagetype: '',
  storage: '',
  bin: '',
  warehouses: [],
  storagetypes: [],
  storages: [],
  bins: [],
  
});


// 表单规则定义
const rules = ref({
	name: [
		{
			type: 'string',
			required: true,
			message: '请填写物料号',
			trigger: ['change']
		},
		{
			type: 'string',
			max: 40,
			message: '物料号不超过40个字符',
			trigger: ['change']
		}
	],
	warehouse: {
		type: 'string',
		required: true,
		message: '请选择',
		trigger: ['blur', 'change']
	},
	storagetype: {
		type: 'string',
		required: true,
		message: '请选择',
		trigger: ['blur', 'change']
	},
	storage: {
		type: 'string',
		required: true,
		message: '请选择',
		trigger: ['blur', 'change']
	},
	bin: {
		type: 'string',
		required: true,
		message: '请选择',
		trigger: ['blur', 'change']
	},
	batch: {
		type: 'string',
		required: true,
		max: 20,
		message: '批次不能为空',
		trigger: ['change']
	},
	number: {
		type: 'number',
		required: true,
		max: 20,
		message: '数量不能为空',
		trigger: ['change']
	}
});
const show = ref(false);
const columns = ref([]);
const show1 = ref(false);
const columns1 =  ref([]);
const show2 = ref(false);
const columns2 = ref([]);
const show3 = ref(false);
const columns3 = ref([]);

function typeSelect(e) {
	if (e.value.length) {
		umodel.warehouse = e.value[0].warehouseName;
		umodel.warehouseId = e.value[0].id;
		console.log(umodel.warehouseId);
	}
	show.value = false
}
function typeSelect1(e) {
	if (e.value.length) {
		umodel.storagetype = e.value[0].storageTypeName;
		umodel.storageTypeId = e.value[0].id;
		console.log(umodel.storageTypeId);
	}
	show1.value = false
}
function typeSelect2(e) {
	if (e.value.length) {
		umodel.storage = e.value[0].storageSectionCode;
		umodel.storageSectionId = e.value[0].id;
		console.log(umodel.storageSectionId);
	}
	show2.value = false
}
function typeSelect3(e) {
	if (e.value.length) {
		umodel.bin = e.value[0].binCode;
	}
	show3.value = false
}
function openTypeSelect() {
	show.value = true;
	uni.hideKeyboard();
}
function openStorageSelect() {
	show1.value = true;
	uni.hideKeyboard();
	getStorageTypes('ddf3c7ec594d4421ad82ce2d99fc3f58',umodel.warehouseId);
	
}
function openstorageSelect() {
	show2.value = true;
	uni.hideKeyboard();
	getStorage('ddf3c7ec594d4421ad82ce2d99fc3f58',umodel.warehouseId,umodel.storageTypeId);
}
function openbinSelect() {
	show3.value = true;
	uni.hideKeyboard();
	getBin('ddf3c7ec594d4421ad82ce2d99fc3f58',umodel.warehouseId,umodel.storageTypeId,umodel.storageSectionId);
}
// 定义列表数据
const scanList = ref([
	{
		code: 'asdcasdcasd',
		name: '',
		warehouse: '',
		number: 0
	}
])

// 重置表单
const uForm = ref();
const scanBarRef = ref();
function reset () {
	uForm.value.resetFields();
	scanBarRef.value.reset();
}

 getWarehouse('c4de3a18a21443b29ffbc5272ecbfceb');


// 获取扫码结果
async function getScanResult(code: string) {
	console.log(code)
	console.log('/wms/storageunit/getinfo/' + code)
  // 根据id访问查询包装单位接口，并将materialcode赋值给umodel.name
  if (code) {
    try {
		const result: PageResult<any>  = await http({
			method: 'GET',
			url: '/wms/storageunit/getin/' + code,
		})
		umodel.name = result.data.materialCode+'|'+result.data.materialName;
		umodel.number = result.data.availableQuantity;
		umodel.batch = result.data.supplyBatch;
		console.log(result);
    } catch (error) {
      console.error(error);
    }
  } else {
    umodel.name = '';
  }
  umodel.code = code;
 

}
async function getWarehouse(organizationId) {
  try {
	  const result: PageResult<any>  = await http({
	  	method: 'GET',
	  	url: '/wms/warehouse/getList',
		data: {
		  organizationId: organizationId
		},
	  })
	  umodel.warehouses=result.data;
	   columns.value = [umodel.warehouses]
	    console.log('columns', columns.value);
  } catch (error) {
    console.error('获取仓库信息失败', error);
  }
}
async function getStorageTypes(organizationId, warehouseId) {
  try {
	  const result: PageResult<any>  = await http({
	  	method: 'GET',
	  	 url: '/wms/storagetype/getList',
	  		data: {
	  		  organizationId: organizationId,
	  		  warehouseId: warehouseId
	  		},
	  })
	  umodel.storagetypes=result.data;
	  columns1.value = [umodel.storagetypes]
	  console.log('columns1', columns1.value);
  } catch (error) {
    console.error('获取存储类型信息失败', error);
  }
}
async function getStorage(organizationId, warehouseId, storageTypeId) {
  try {
	  const result: PageResult<any>  = await http({
	  	method: 'GET',
	  	  url: '/wms/wmsstoragesection/getList',
	  	data: {
	  	  organizationId: organizationId,
	  	  warehouseId: warehouseId,
	  			storageTypeId: storageTypeId
	  			
	  	},
	  })
	  console.log(result.data);
	  umodel.storages=result.data;
	 columns2.value = [umodel.storages]
	 console.log('columns2', columns2.value);
    
   }catch (error) {
    console.error('获取存储区信息失败', error);
  }
}

async function getBin(organizationId, warehouseId, storageTypeId, storageSectionId) {
  try {
	  const result: PageResult<any>  = await http({
	   	method: 'GET',
	   	  url: '/wms/bin/getList',
	   	data: {
	   	        organizationId: organizationId,
	   	        warehouseId: warehouseId,
	   			storageTypeId: storageTypeId,
	   			storageSectionId: storageSectionId
	   	},
	   })
	   console.log(result.data);
	   umodel.bins=result.data;
	 columns3.value = [umodel.bins]
	 console.log('columns3', columns3.value);
  } catch (error) {
    console.error('获取仓位失败', error);
  }
}

// 表单提交
const submitLoading = ref(false);
function submit () {
	if (submitLoading.value === false) {
		submitLoading.value = true;
		uni.showLoading({
			title: '提交中···'
		})
		// 模拟提交成功操作
		setTimeout(()=>{
			uni.hideLoading();
			submitLoading.value = false;
			uni.showToast({
				title: '已成功'
			})
		}, 1000);
	}
}

// 跳转至详情页面
function jumpToDetail(id: string) {
	uni.navigateTo({
		url: `/pages/demo/formList/detail?id=${id}`
	});
}


</script>

<style lang="scss" scoped>
.baseForm {
	padding: $uni-page-padding;
	padding-bottom: 30px;
	margin: 50px 0 0 0;
	.u-form {
		margin-top: 5px;
		:deep(.u-form-item__body) {
			padding: 5px 0;
		}
		.u-input {
			border: 1px solid $uni-input-border-color;
		}
		.scan-bar {
			display: flex;
			flex: 1;
		}
	}
	.u-line {
		padding: 10px 0;
	}
	.search {
		display: flex;
		.custom-style {
			// width: 120px;
			margin: 10px 5px 5px;
			height: 36px;
			border-radius: 8px;
			&:nth-child(1) {
				flex: 1
			}
			&:nth-child(2) {
				flex: 3
			}
		}
	}
	.list {
		.list-title {
			line-height: 40px;
			font-size: 14px;
			color: rgba(0, 0, 0, 0.4);
		}
		.card {
			margin-top: 5px;
			margin-bottom: 10px;
			border-radius: 7px;
			display: flex;
			align-items: center;
			padding: 10px 0;
			transition: all 300ms ease;
			box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
			.left {
				// flex-basis: 90rpx;
				padding-right: 10px;
				text-align: right;
				font-size: 13px;
				.enter {
					line-height: 20px;
					margin-bottom: 5px;
				}
				.number {
					font-size: 13px;
					line-height: 18px;
				}
				:deep(.u-icon--right) {
					flex-direction: row-reverse;
				}
			}
			.right {
				flex: 1;
				padding-left: 15px;
				.title {
					font-size: 15px;
					line-height: 20px;
					margin-bottom: 5px;
				}
				.body {
					color: rgba(0, 0, 0, 0.4);
					font-size: 13px;
					line-height: 18px;
				}
			}
		}
	}
}
</style>
